$(function () {


    // 参数名	必选	 类型	  说明
    // pagenum	是	    int	     页码值
    // pagesize	是	    int	     每页显示多少条数据
    // cate_id	否	    string   文章分类的 Id
    // state	否	    string   文章的状态，可选值有：已发布、草稿

    // 设置一个全局变量 因为将来筛选和分页都要用
    let q = {
        pagenum: 1,
        pagesize: 5,
        cate_id: "",
        state: ""
    }

    // 需求1:初始化文章列表
    // 未来还要用,封装成函数
    initArticleList()
    function initArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(({ data: res }) => {
            // 失败 弹出失败信息
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            // console.log(res);
            //成功
            let htmlArr = []
            res.data.forEach(value => {
                htmlArr.push(`
                 <tr>
                        <td>${value.title}</td>
                        <td>${value.cate_name}</td>
                        <td>${dateFormat(value.pub_date)}</td>
                        <td>${value.state}</td>
                        <td>
                                                            <!-- 这里获取id编辑页面需要使用-->
                            <a href="/article/art_edit.html?id=${value.Id}" class="layui-btn layui-btn-xs">编辑</a>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn" data-id=${value.Id}>删除</button>
                        </td>
                    </tr>
                `)
            })
            // 赋值 渲染到页面
            $('tbody').empty().html(htmlArr.join(''))

            // console.log(res.total); //图书列表总数目
            //初始化文章列表后 ,进行分页处理
            //页面加载后,设筛选后都要调用这个方法  
            renderPage(res.total)

        });
    }

    // 需求2:渲染选中的文章分类列表
    let form = layui.form
    ininArtCateList()
    function ininArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get'
        }).then(({ data: res }) => {
            if (res.status !== 0) {
                // 失败
                return layer.msg(res.message)
            }
            // 成功 渲染
            let arr = [`<option value="">请选择文章所属分类</option>`]
            res.data.forEach(value => {
                arr.push(`<option value="${value.Id}">${value.name}</option>`)
            })
            // 循环结束赋值
            let str = arr.join('')
            //  找到文章列表下的分类 将子级option渲染
            $('[name="cate_id"]').empty().html(str)

            //form.render() 可以渲染layui中的 slect/checkbox/radio
            form.render()
        });
    }

    // 需求3:筛选 文章类别 
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // 点击筛选按钮 阻止默认事件 修改后台参数的 文章分类 和 发布状态
        //后台参数 cate_id  文章的分类id  根据form表单里面的值修改
        q.cate_id = $('[name="cate_id"]').val()
        //后台参数state  文章的发布状态的值修改
        q.state = $('[name="state"]').val()
        // 重新渲染 文章列表
        initArticleList()
    })


    // 需求4:重置按钮
    $('#resetForm').on('click', function () {
        // window.parent.document.querySelector('#art_list').click()
        e.cate_id = ''
        e.state = ''
        q.pagenum = 1
        //初始化文章列表
        initArticleList()
    })


    // 需求5:删除按钮   注册委托事件 处理动态新增的元素
    $('tbody').on('click', '.del-btn', function (e) {
        // 获取自定义属性id
        let id = e.target.getAttribute('data-id')
        // console.log(id);
        // 询问框
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                url: '/my/article/delete/' + id,
                method: 'get',
            }).then(({ data: res }) => {
                if (res.status !== 0) {
                    // 失败 信息
                    return layer.msg(res.message)
                }
                // 成功 提示
                layer.msg('删除成功')
                // (删除ajax成功后) 当我们再次发起请求的时候,如果页面中还有一条数据,当前页--,当前页大于等于2有资格--
                //if($(".del-btn").length == 1 && q.pagenum >=2) q.pagenum--
                // 优化 短路运算,前面的代码满足条件,后面的才会执行
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--

                // 重新渲染 文章列表
                initArticleList()
            });
            // 关闭询问框
            layer.close(index);
        });

    })

    // document.querySelector('tbody').onclick = function (e) {
    //     if (e.target.classList.contains('del_btn')) {
    //         // 获取自定义属性id
    //         let id = e.target.getAttribute('data-id')
    //         // console.log(id);
    //         // 询问框
    //         layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
    //             //do something
    //             axios({
    //                 url: '/my/article/delete/' + id,
    //                 method: 'get',
    //             }).then(({ data: res }) => {
    //                 if (res.status !== 0) {
    //                     // 失败 信息
    //                     return layer.msg(res.message)
    //                 }
    //                 // 成功
    //                 layer.msg('删除成功')
    //                 // 重新渲染 文章列表
    //                 initArticleList()
    //             });
    //             // 关闭询问框
    //             layer.close(index);
    //         });
    //     }
    // }

    // 需求6:分页   在需求1 初始化文章列表获取到图书列表总数目
    function renderPage(total) {
        let laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox',//注意，这里的 test1 是 ID，不用加 # 号
            count: total,//数据总数，从服务端得到
            limit: q.pagesize,// 每页显示多少条
            curr: q.pagenum,//第几页

            // 显示区域  的顺序
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refesh', 'skip'],
            limits: [5, 10, 15, 20],//每页条数的选择项
            // 页面加载的时候,页码切换的时候回触发,每页显示条数改变的时候会触发
            jump: function (obj, first) {
                // obj包含了当前分页的所有参数,比如
                // console.log(obj.curr)//得到当前页面,以便向服务器端请求对应页的数据
                // console.log(obj.limit);得到每页显示的条数
                // 首次不执行
                if (!first) {
                    // 把当前页面改变,重新渲染文章列表
                    q.pagenum = obj.curr
                    // 把条数改变
                    q.pagesize = obj.limit
                    //初始化文章列表
                    initArticleList()
                }
            }
        })
    }


    //

})